<template>
	<view>
		<view>
			<u-navbar title="我的名片" :bgColor="theme_color" :autoBack="true" :titleStyle="{color:'#ffffff'}"
				leftIconColor="#ffffff">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" size="19" color="#ffffff"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px" color="#ffffff"></u-line>
					<u-icon name="home" size="20" color="#ffffff" @click.stop="onToHomePage"></u-icon>
				</view>
			</u-navbar>
			<view :style="'margin-top:' + navH + 'px;'">
				<view style="padding: 10px;height: 40px;display: flex;justify-content: flex-end;" class="acea-row">
					<navigator url="../card_form/index" class="acea-row row-middle">
						<view>添加名片</view>
						<u-icon name="arrow-right" color="#737278" size="16"></u-icon>
					</navigator>
				</view>
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
					<view class="card-list">
						<view style="border-radius: 10px;height: 200px;display: flex;margin-top: 10px;
						background-color: #e2e2e27a;" v-for="(item,index) in card_list" :key="index">
							<view @click.stop="toCard(item.id)" style="height: 200px;border-radius: 10px;flex:7;position: relative;object-fit: contain;
						     background-size:100% 200px;" :style="'background-image:url(' + item.bg_img + ');'">
								<view style="height:200px;display: flex;">
									<view style="display: flex;flex-direction: column;flex:3;">
										<image :src="item.head_img"
											style="width: 60px;height: 60px;margin: 25px auto 10px; border-radius: 50%;">
										</image>
									</view>
									<view style="flex: 6;position: relative;">
										<view style="color: white;margin-top: 20px;">
											<text style="font-size: 16px;font-weight: bold;">{{item.name}}</text><text
												style="font-size: 12px;margin-left: 10px;">{{item.position}}</text>
										</view>
										<view style="color: white;margin-top: 10px;">
											{{item.company}}
										</view>
										<view style="position: absolute;bottom: 10px;">
											<view style="color: white;">{{item.mobile[0]}}</view>
											<view style="color: white;margin-top: 10px;">{{item.address}}</view>
										</view>
									</view>
								</view>
								<view style="position: absolute;top:5px;right:5px">
									<u-tag text="未审核" v-if="item.audit_status ==0" type="warning"></u-tag>
									<u-tag text="已通过" v-if="item.audit_status ==1" type="success"></u-tag>
									<u-tag text="已拒绝" v-if="item.audit_status ==2" type="error"></u-tag>
								</view>
							</view>
							<view style="flex: 1;">
								<!-- <view class="uicon">
									<button open-type="share" :data-item="item">
										<u-icon name="share-square" color="#30DDF0" size="28"></u-icon>
									</button>
								</view> -->
								<view class="uicon" @click="edit(item.id)">
									<u-icon name="edit-pen" color="#948BFF" size="28"></u-icon>
								</view>
								<view class="uicon" @click="delete_card(item.id)">
									<u-icon name="trash" color="#CDCDCD" size="28"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</mescroll-body>
			</view>


		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		card_list,
		del_card
	} from "@/api/yellowpage.js";
	import {
		mapState,
		mapGetters
	} from "vuex";
	import {
		BASE_URL
	} from '@/config/app';
	const common = require('@/mixins/common');
	var options = {};
	common(options);
	export default {
		mixins: [MescrollMixin, {
			methods: options
		}],
		data() {
			return {
				navH: '',
				theme_color: getApp().globalData.theme_color,
				card_list: [],
				bg_list: getApp().globalData.card_bg_list,
				selected_bg: '',
			}
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin',
				app_token: 'app_token'
			})
		},
		onLoad() {
			var that = this;
			this.navH = getApp().globalData.navHeight / 2;
		},
		onShow() {
			this.canReset && this.mescroll.resetUpScroll()
			this.canReset && this.mescroll.scrollTo(0, 0)
			this.canReset = true
		},
		//#ifdef MP
		// 分享到微信好友
		onShareAppMessage(e) {
			if (e.from === "button") {
				let obj = e.target.dataset.item
				return {
					title: `${obj.name}` + ' ' + `${obj.company}`,
					imageUrl: `${obj.head_img}`,
					path: `/pages/yellow_page/card_info/index?id=${obj.id}` // 地址以及参数  
				};
			} else {
				return {
					title: '一浪信息平台-商家黄页',
					path: `/pages/yellow_page/index/index`
				};
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: '一浪信息平台-商家黄页',
				path: '/pages/yellow_page/index/index'
			};
		},
		//#endif
		methods: {
			toCard(id) {
				uni.navigateTo({
					url: '../card_info/index?id=' + id
				})
			},
			upCallback(page) {
				var that = this;
				card_list({
					app_token: that.app_token,
					page: page.num,
				}).then(async (res) => {
					this.mescroll.endSuccess(res.data.length);

					//设置列表数据
					if (page.num == 1) this.card_list = []; //如果是第一页需手动制空列表

					this.card_list = this.card_list.concat(res.data); //追加新数据

					for (var i = 0; i < this.card_list.length; i++) {
						this.card_list[i].mobile = this.card_list[i].mobile.split(",");
						this.card_list[i].bg_img = this.bg_list[parseInt(this.card_list[i].back_color - 1)];
					}

				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			toSchool(index) {
				uni.navigateTo({
					url: '../school/index'
				})
			},

			delete_card(id) {
				var that = this;
				uni.showModal({
					content: '确认删除吗？',
					cancelText: '取消',
					// cancelColor: '#ABABAB',
					confirmText: '确定',
					// confirmColor: '#D56437',
					success: function(res) {
						if (res.confirm) {
							del_card({
								app_token: that.app_token,
								id: id
							}).then((res) => {
								uni.showToast({
									title: '删除' + res.msg,
									duration: 1000
								})
								that.mescroll.resetUpScroll();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			edit(id) {
				uni.navigateTo({
					url: '../card_form/index?id=' + id
				})
			}
		}
	}
</script>

<style lang="scss">
	.card-list {
		background-color: #fff;
		padding: 10px;

		.uicon {
			margin: 10px auto;
			width: 28px;
			height: 28px;
		}
	}
</style>